import { useNavigate } from 'react-router-dom';
import { Card, Button, Avatar, Divider, Modal, message } from 'antd';
import { UserOutlined, PhoneOutlined, LogoutOutlined, ExclamationCircleOutlined } from '@ant-design/icons';

export default function Profile() {
  const navigate = useNavigate();
  const user = JSON.parse(localStorage.getItem('user') || '{}');

  const handleLogout = () => {
    Modal.confirm({
      title: '确认退出',
      icon: <ExclamationCircleOutlined />,
      content: '确定要退出登录吗？',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        localStorage.removeItem('token');
        localStorage.removeItem('user');
        message.success('已退出登录');
        navigate('/login');
      }
    });
  };

  return (
    <div style={{ padding: 20 }}>
      <Card
        style={{
          background: 'rgba(0, 0, 0, 0.7)',
          backdropFilter: 'blur(10px)',
          border: '1px solid rgba(212, 175, 55, 0.2)',
          borderRadius: 16,
          marginBottom: 20
        }}
        bodyStyle={{ padding: 32, textAlign: 'center' }}
      >
        <Avatar
          size={80}
          icon={<UserOutlined />}
          style={{
            background: 'linear-gradient(135deg, #d4af37 0%, #f4e5a1 100%)',
            marginBottom: 16
          }}
        />
        <div style={{
          color: '#d4af37',
          fontSize: 24,
          fontWeight: 600,
          marginBottom: 8
        }}>
          {user.name || '会员'}
        </div>
        <div style={{
          color: 'rgba(255, 255, 255, 0.5)',
          fontSize: 14
        }}>
          <PhoneOutlined /> {user.phone}
        </div>
      </Card>

      <Card
        style={{
          background: 'rgba(0, 0, 0, 0.7)',
          backdropFilter: 'blur(10px)',
          border: '1px solid rgba(212, 175, 55, 0.2)',
          borderRadius: 16
        }}
        bodyStyle={{ padding: 0 }}
      >
        <div style={{
          padding: '16px 20px',
          color: '#fff',
          fontSize: 16,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          borderBottom: '1px solid rgba(212, 175, 55, 0.1)'
        }}>
          <span>会员等级</span>
          <span style={{ color: '#d4af37' }}>普通会员</span>
        </div>

        <div style={{
          padding: '16px 20px',
          color: '#fff',
          fontSize: 16,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center'
        }}>
          <span>账号状态</span>
          <span style={{ color: '#52c41a' }}>正常</span>
        </div>
      </Card>

      <Divider style={{ borderColor: 'rgba(212, 175, 55, 0.2)' }} />

      <Button
        danger
        size="large"
        block
        icon={<LogoutOutlined />}
        onClick={handleLogout}
        style={{
          height: 48,
          fontSize: 16,
          fontWeight: 600,
          borderRadius: 8
        }}
      >
        退出登录
      </Button>

      <div style={{
        marginTop: 32,
        textAlign: 'center',
        color: 'rgba(255, 255, 255, 0.3)',
        fontSize: 12
      }}>
        酒吧会员系统 v1.0.0
      </div>
    </div>
  );
}
